<template>
    <Card title="快捷导航" bodyClass="shortcuts">
        <el-button 
            v-for="(shortcut, index) in shortcuts" 
            :key="index" 
            :type="shortcut.type || 'default'" 
            @click="shortcut.onClick"
        >
            <i :class="['iconfont', shortcut.icon]"/>
            {{ shortcut.title }}
        </el-button>
    </Card>
</template>

<script>
import Card from '../Card.vue';
import { showMemberDialog } from '@/views/system/member/components/MemberFormDialog/index.js';
// import { showRechargeDialg } from "@/views/system/member/components/RechargeFormDialg/index.js";
// import { showConsumeDialog } from "@/views/system/member/components/ConsumeFormDialog/index.js";
export default {
    components: {
        Card
    },
  data() {
    return {
        shortcuts: [
            {
                title: '散客买单',
                icon: 'icon-31huiyuanqia',
                type: 'primary',
                onClick: () => {
                    alert(1)
                }
            },
            {
                title: '会员扣款',
                icon: 'icon-maidan',
                type: 'warning',
                onClick: () => {
                    alert(1)
                }
            },
            {
                title: '新增会员',
                icon: 'icon-xinzenghuiyuan',
                type: 'success',
                onClick: showMemberDialog
            },
            {
                title: '会员充值',
                icon: 'icon-huiyuanchongzhi',
                type: 'danger',
                onClick: () => {
                    alert(1)
                }
            }
        ]
    }
  },
  computed: {},
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>

::v-deep .shortcuts{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px;
    grid-template-rows: repeat(2, 1fr);
    .el-button + .el-button{
        margin: 0;
    }
}
</style>